<template>
  <div class="msg-list">
    <h3 class="msg-header">
      消息列表
    </h3>
    <div class="list-contain">
      <div class="list-item" v-for="(item,index) in msgList" :key="item.id" @click="setEnterComp(index)">
        <img class="item-avatar" :src="item.imgUrl" :alt="item.name"/>
        <div class="item-name">
          <p>{{item.name}}</p>
          <p class="item-msg-text">{{item.msgText}}</p>
        </div>
        <div class="item-time">
            <p>{{item.time}}</p>
            <div class="msg-count">
              {{item.msgCount}}
            </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'Talk',
    data () {
      return {

      }
    },
    props:['msgList'],
    methods:{
      setEnterComp(idx){
        this.$emit('getEnterCompany',idx)
      }
    }
  }
</script>

<style scoped="scoped" lang="scss">
  .msg-list{
    padding: 0.3rem;
    .msg-header{
      font-size: 1.2em;
    }
    .list-contain{
      .list-item{
        padding: 0.5em;
        border-bottom: 1px solid #ccc;
        display: flex;
        align-items: center;
        .item-avatar{
          width: 1rem;
          height: 1rem;
          border-radius: 50%;
        }
        .item-name{
          flex: 5;
          color: #333;
          padding-left: 2em;
          .item-msg-text{
            font-size: 0.8em;
            color: #a0a0a0;
          }
        }
        .item-time{
          flex: 1;
          .msg-count{
            width: 1.3em;
            height: 1.3em;
            margin: 0.3em auto 0;
            line-height: 1.3em;
            color: #fff;
            border-radius: 50%;
            background-color: #e74c3c;
            text-align: center;
          }
        }
      }
    }
  }
</style>
